<template>
  <!-- 合同详情 -->
  <div>
    <Banners />
    <div class="orderDetails content-box">
      <el-card class="box-card box-card-ordernum">
        <span
          >合同编号：<span class="text-blue">{{ userdata.contractNumber }}</span></span
        >
        <span
          >合同状态状态：
          <span v-if="userdata.contractStatus == 0">未签</span>
          <span v-if="userdata.contractStatus == 1">已签</span>
          <span v-if="userdata.contractStatus == 2">即将到期</span>
          <span v-if="userdata.contractStatus == 3">到期</span>
          <span v-if="userdata.contractStatus == 4">终止</span>
          <span v-if="userdata.contractStatus == 5">续签)</span>
        </span>
        <span class="orderMoney"
          >合同金额(元) <span class="text-orange">{{ userdata.sumMoney }}</span></span
        >
      </el-card>
      <!-- 缺少字段后台的数据格式有待修改 -->
      <p class="zulin">租赁公司信息</p>
      <el-card class="box-card corporate-information">
        <div class="companyName">
          <div>公司名称：{{ userdata.companyName }}</div>
          <!-- null -->
          <div class="businessLicense">营业执照：{{ userdata.taxpayerNumber }}</div>
        </div>
        <div class="linkman">
          <div>联系人：{{ userdata.contactUserName }}</div>
          <div class="legalPerson">法人：{{ userdata.legalIdName }}</div>
        </div>
        <div class="contactWay">
          <div>联系人方式：{{ userdata.contactUserPhone }}</div>
          <div class="farenCall">法人联系方式：{{ userdata.legalPhone }}</div>
        </div>
      </el-card>
      <!-- --------------------------------------------------------------------- -->

      <!-- 房屋基础信息目前大部分数据没有，缺少字段以及后台返回的数据格式有待修改 -->
      <p>房屋基础信息</p>
      <el-card class="box-card corporate-information">
        <div class="companyName">
          <div v-if="userdata.buildingType == 'complex_building'">房产类型：综合楼</div>
          <div v-if="userdata.buildingType == 'exhibition'">房产类型：展场</div>
          <div v-if="userdata.buildingType == 'exclusive_shop'">房产类型：形象店</div>
          <div v-if="userdata.buildingType == 'Automobile 4S'">房产类型：4S店</div>
          <div v-if="userdata.buildingType == 'virtualhouse'">房产类型：虚拟房产</div>
          <div class="businessLicense">面积：{{ userdata.rentProjectVOs.projectArea }}</div>
        </div>
        <div class="linkman">
          <div>房屋编号：{{ userdata.advertisingLocation }}</div>
          <div class="legalPerson">楼号：{{ legalPerson }}</div>
        </div>
        <div class="contactWay">
          <div>房号：{{ contactWay }}</div>
          <div class="farenCall">楼层：{{ farenCall }}</div>
        </div>
      </el-card>
      <!-- --------------------------------------------------------------------- -->
      <p>租金信息</p>
      <el-card class="box-card corporate-information">
        <div class="header">
          <div class="left">
            <span>租金</span>
            <span class="pink">免延1个月</span>
          </div>
          <div class="right">
            <span>租赁合同金额：</span>
            <span>{{ zjList.totalAmount }}元</span>
          </div>
        </div>
      </el-card>
      <el-card class="box-card corporate-information">
        <!-- 第一行数据 -->
        <div class="info">
          <div style="width: 15%" class="odd">租赁开始日期</div>
          <div style="width: 20%" class="even">{{ userdata.rentStartTime }}</div>
          <div style="width: 15%" class="odd">租赁月份</div>
          <div style="width: 20%" class="even">{{ month }}月</div>
          <div style="width: 15%" class="odd">租赁面积(㎡)</div>
          <div style="width: 20%" class="even">{{ userdata.rentarea }}</div>
        </div>
        <!-- 第二行 -->
        <div class="info">
          <div style="width: 15%" class="odd">租赁起止时间</div>
          <div style="width: 20%" class="even">{{ userdata.rentStartTime }} 至 {{ userdata.rentEndTime }}</div>
          <div style="width: 15%" class="odd">租赁单价</div>
          <div style="width: 20%" class="even"></div>

          <div style="width: 15%" class="odd">税率</div>
          <div style="width: 20%" class="even">{{ zjList.taxRateId }}%</div>
        </div>
        <!-- 第三行 -->

        <div class="info">
          <div style="width: 15%" class="odd">含税合同金额</div>
          <div style="width: 20%" class="even">{{ zjList.incTaxTotalAmount }}</div>
          <div style="width: 15%" class="odd">无税合同金额</div>
          <div style="width: 20%" class="even">{{ zjList.noTaxTotalAmount }}</div>
          <div style="width: 15%" class="odd">税金</div>
          <div style="width: 20%" class="even">{{ zjList.taxAmount }}</div>
        </div>
        <!-- 第四行 -->
        <div class="info">
          <div style="width: 15%" class="odd">收费期间</div>
          <div style="width: 20%" class="even">{{ userdata.rentStartTime }} 至 {{ userdata.rentEndTime }}</div>
          <div style="width: 15%" class="odd">收费金额(元)</div>
          <div style="width: 55%" class="even">{{ zjList.totalAmount }}</div>
        </div>
        <div class="title">
          <div class="odd foot" style="width: 100%">
            租赁保证金：<span>{{ zjList.guaranteeAmount }}</span>
          </div>
        </div>
      </el-card>
      <!-- 市场管理费 -->
      <p>市场管理服务信息</p>
      <span style="margin-left: 65%"
        >市场管理服务合同金额：<i>{{ scglList.totalAmount }}元</i></span
      >

      <el-card class="box-card corporate-information">
        <!-- 第一行数据 -->
        <div class="info">
          <div style="width: 15%" class="odd">市场管理服务费单价</div>
          <div style="width: 20%" class="even">㎡</div>
          <div style="width: 15%" class="odd">税率</div>
          <div style="width: 20%" class="even">{{ scglList.taxRateId }}%</div>
          <div style="width: 15%" class="odd">含税合同金额(元)</div>
          <div style="width: 20%" class="even">{{ scglList.incTaxTotalAmount }} 元</div>
        </div>
        <!-- 第二行 -->
        <div class="info">
          <div style="width: 15%" class="odd">无税合同金额(元)</div>
          <div style="width: 20%" class="even">{{ scglList.noTaxTotalAmount }} 元</div>
          <div style="width: 15%" class="odd">税金(元)</div>
          <div style="width: 20%" class="even">{{ scglList.taxAmount }} 元</div>

          <div style="width: 15%" class="odd">收费起止时间</div>
          <div style="width: 20%" class="even">{{ userdata.rentStartTime }} 至 {{ userdata.rentEndTime }}</div>
        </div>
        <!-- 第三行 -->

        <div class="info">
          <div style="width: 15%" class="odd">收费金额(元)</div>
          <div style="width: 90%" class="even">{{ scglList.totalAmount }} 元</div>
        </div>
      </el-card>
      <span> <i class="el-icon-paperclip"></i> 附件下载：</span> <span><el-button type="text" size="medium">租赁合同.pdf</el-button></span>
    </div>
    <Foots />
  </div>
</template>

<script>
import Banners from '@/components/NavHead/index'
import { getpaycostlist } from './index.js'

import Foots from '@/components/Footer/index'
export default {
  components: {
    Banners,
    Foots,
  },
  data() {
    return {
      month: '',
      id: '',
      userdata: [],
      orderNum: '',
      orderMoney: '',
      payed: '',
      companyName: '',
      businessLicense: '',
      linkman: '',
      legalPerson: '',
      contactWay: '',
      farenCall: '',
      zjList: {},
      scglList: {},
    }
  },
  created() {},

  mounted() {
    this.id = this.$route.query.id
    this.getlist()
  },

  methods: {
    //月份转化租赁月份总数
    getmonth(start, end) {
      start = start.split('-')
      end = end.split('-')
      return (end[0] - start[0]) * 12 + (end[1] - start[1]) + (end[2] - start[2] >= 0 ? 0 : -1)
    },
    async getlist() {
      let id = this.id
      try {
        const { data } = await getpaycostlist(id)
        if (data.code == 0) {
          this.$message.success('获取详情成功')
          this.userdata = data.data
          this.month = this.getmonth(this.userdata.rentStartTime, this.userdata.rentEndTime) //转化月份
        }
        let arr = data.data.ctContractChargeSummaryList
        arr.map((item, index) => {
          if (item.chargeType == 0) {
            this.scglList = arr[index]
          } else {
            this.zjList = arr[index]
          }
          return true
        })
        console.log(this.zjList, 'zj') //获取到数据筛选出租金的数据
        console.log(this.scglList, 'sc')//获取到的数据筛选市场费用
        console.log(data, '获取详情成功')
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style scoped lang="less">
.orderDetails {
  width: 85%;
  margin: 0 auto;
  padding: 20px;
  .box-card-ordernum {
    width: 100%;
    position: relative;
    .text-blue {
      margin-right: 100px;
    }
    .orderMoney {
      position: absolute;
      right: 20px;
    }
  }
  .corporate-information {
    font-size: 14px;
    color: rgb(132, 132, 132);
    .linkman {
      display: inline-block;
      .legalPerson {
        margin-top: 15px;
      }
    }
    .companyName {
      margin-right: 20%;
      display: inline-block;
      .businessLicense {
        margin-top: 15px;
      }
    }
    .contactWay {
      margin-left: 20%;
      display: inline-block;
      .farenCall {
        margin-top: 15px;
      }
    }
  }
  p {
    display: inline-block;
    margin: 10px 0;
    border-bottom: 2px solid #57a9fe;
    padding: 10px 0;
    color: #57a9fe;
  }
  .header {
    width: 100%;
    height: 15px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    .pink {
      margin: 0 15px;
      background-color: #fa9aa5;
      color: #f7f7f7;
      padding: 3px;
    }
  }
  .info {
    display: flex;
    align-items: center;
    justify-content: start;
    border: 1px solid #ebebeb;
    div {
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
    .odd {
      background-color: #f7f7f7;
    }
    .even {
      text-align-last: left;
      margin-left: 5px;
    }
  }
  .title {
    text-align: right;
    border: 1px solid #ebebeb;
    height: 40px;
    line-height: 40px;
    background-color: #f7f7f7;
    span {
      color: #fd7373;
      margin-right: 5px;
    }
  }
}
</style>
